<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10.18</title>
</head>
<style>

    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .box{
        width: 400px;
        height: 120px;
        margin: 0 auto;

    }
    .img{
        width: 400px;
        height: 100px;
        display: flex;
        justify-content: space-between;
        background-image: url('./04.jpeg');
        background-image: url('./03.jpeg');
        background-image: url('./02.jpeg');
        background-image: url("./01.jpeg");
        background-size: 400px 100px;
    }
    .img1{
        width: 30px;
        height: 30px;
        margin: auto 0;
    }
    .prev{
        width: 30px;
        height: 30px;
        margin: auto 0;
        background-size: 30px 30px;
    }
    .next{
        width: 30px;
        height: 30px;
        margin: auto 0;
        background-size: 30px 30px;
    }
    .btn{
        width: 200px;
        height: 20px;
        display: flex;
        justify-content: space-around;
        margin-left: 100px;
    }
    .btn1{
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin: auto 0;
        border: 1px solid black;
    }
    .btn2{
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin: auto 0;
        border: 1px solid black;
    }
    .btn3{
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin: auto 0;
        border: 1px solid black;
    }
    .btn4{
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin: auto 0;
        border: 1px solid black;
    }
    .background{
        background-color: black;
    }
</style>
<body>
    <div class="box">
        <div class="img">
            <a href="" class="prev">&lt;</a>
            <a href="" class="next">&gt;</a>
            
        </div>
        <div class="btn">
            <div class="btn1"></div>
            <div class="btn2"></div>
            <div class="btn3"></div>
            <div class="btn4"></div>
        </div>
    </div>


    <script>
        let img = document.querySelector('.img');
        let prev = document.querySelector('.prev');
        let next = document.querySelector('.next');
        let btn = document.querySelector('.btn');
        let btn1 =document.querySelector('.btn1');
        let btn2 =document.querySelector('.btn2');
        let btn3 =document.querySelector('.btn3');
        let btn4 =document.querySelector('.btn4');
        // prev =addEventListener('click',() =>{
        //     img.style.backgroundImage = 'url("./01.jpeg")'
        // })
        //点击点
        btn1.addEventListener('click',() =>{
            img.style.backgroundImage = 'url("./01.jpeg")';
            btn1.classList.add('background');
            btn2.classList.remove('background');
            btn3.classList.remove('background');
            btn4.classList.remove('background');
        });
        btn2.addEventListener('click',() =>{
            img.style.backgroundImage = 'url("./02.jpeg")';
            btn1.classList.remove('background');
            btn2.classList.add('background');
            btn3.classList.remove('background');
            btn4.classList.remove('background');
            
        
        });
        btn3.addEventListener('click',() =>{
            img.style.backgroundImage = 'url("./03.jpeg")';
            btn3.classList.add('background');
            btn1.classList.remove('background');
            btn2.classList.remove('background');
            btn4.classList.remove('background');
        
        });
        btn4.addEventListener('click',() =>{
            img.style.backgroundImage = 'url("./04.jpeg")';
            btn4.classList.add('background');
            btn1.classList.remove('background');
            btn2.classList.remove('background');
            btn3.classList.remove('background');
        
        })
    </script>
</body>
</html>